<template>
  <div>
    <h1>二十五年走势</h1>
    <div id="ndx100_2000_today" style="width: 100%; height: 420px;"></div>
  </div>
</template>
<script>
import ndx100 from "@/views/ndx/finalNdx.json"
import * as echarts from "echarts"
export default {
  mounted() {
    this.setAllYears()
  },
  methods: {
    setAllYears() {
      let xDate = ndx100.map(it => it['日期'])
      let yEnd = ndx100.map(it => it['收盘'])
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          },
          {
            type: 'slider',
            start: 0,
            end: 100
          }
        ],
        xAxis: {
          type: 'category',
          data: xDate
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: 'ndx100',
            data: yEnd,
            type: 'line',
          }
        ]
      };
      let myChart = echarts.init(document.getElementById('ndx100_2000_today'));
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
}
</script>